<template>
    <div>
        <div v-if="lyric.length>0">

            <div
                class="musicLyric"
                v-for="(item, index) in lyric"
                :key="index"
                :class="index===lyricIndex?'colorLight':''"
            >
                <p>{{item.text}}</p>
            </div>
        </div>
        <p
            style=" margin: 100px 0;"
            v-else
        >暂无歌词</p>
    </div>
</template>

<script>
export default {
    props: {
        // 歌词列表
        lyric: {
            type: Array,
            default: () => [],
        },
        // 当前歌词下标索引
        lyricIndex: {
            type: Number,
            default: 0,
        },
        // 歌词默认色
        color: {
            type: String,
            default: "#fff",
        },
        // 歌词高亮色
        colorLight: {
            type: String,
            default: "#40ce8f",
        },
        fontSize: {
            type: String,
            default: "16px",
        },
        lineHeight: {
            type: String,
            default: "42",
        },
        paddingTop: {
            type: String,
            default: "300px",
        },
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {

    },
}
</script>

<style lang="less" scoped>
.musicLyric {
    box-sizing: border-box;
    overflow: hidden;
}
p {
    width: 500px;
    margin: 12px 0;
    font-size: 18px;
    color: #fff;
}
.colorLight {
    color: #40ce8f;
}
</style>